<template>
  <a-drawer
    :visible="visibleModify"
    width="600px"
    destroyOnClose
    :title="isEdit ? '修改教代会' : '新建教代会'"
    @close="emit('closeDrawer'), closeDrawer()"
  >
    <a-form
      ref="formRef"
      :model="formState"
      name="basic"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      autocomplete="off"
    >
      <a-form-item
        label="教代会年份"
        name="year"
        :rules="[
          { required: true, message: '请选择教代会年份', trigger: 'blur' },
        ]"
      >
        <a-date-picker
          allowClear
          v-model:value="formState.year"
          picker="year"
          placeholder="选择年份"
          valueFormat="YYYY"
        />
      </a-form-item>

      <a-form-item
        label="教代会届数"
        name="term"
        :rules="[
          { required: true, message: '请选择教代会届数', trigger: 'blur' },
        ]"
      >
        <a-select
          ref="select"
          v-model:value="formState.term"
          style="width: 100%"
          @change="handleChange"
          placeholder="请选择届数"
        >
          <a-select-option value="一">一届</a-select-option>
          <a-select-option value="二">二届</a-select-option>
          <a-select-option value="三">三届</a-select-option>
          <a-select-option value="四">四届</a-select-option>
          <a-select-option value="五">五届</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="教代会次数"
        name="number"
        :rules="[
          { required: true, message: '请选择教代会次数', trigger: 'blur' },
        ]"
      >
        <a-select
          ref="select"
          v-model:value="formState.number"
          style="width: 100%"
          @change="handleChange"
          placeholder="请选择次数"
        >
          <a-select-option value="一">第一次</a-select-option>
          <a-select-option value="二">第二次</a-select-option>
          <a-select-option value="三">第三次</a-select-option>
          <a-select-option value="四">第四次</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="教代会描述" name="description">
        <a-textarea
          v-model:value="formState.description"
          placeholder="请输入教代会描述"
          :rows="3"
        />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 3 }" v-if="!isEdit">
        <a-checkbox v-model:checked="remember"
          >延用上一次教代会的组织机构及代表信息，包含【筹备领导小组;资格审查小组，主席团;执行委员会;专门委员会，代表
          团;教代会代表】</a-checkbox
        >
      </a-form-item>
    </a-form>
    <template #extra>
      <a-space>
        <a-button type="primary" @click="onSubmit">{{
          isEdit ? "修改" : "创建"
        }}</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { message, FormInstance } from "ant-design-vue";
import { Session, createSession, editSession } from "@/api/teachers";
// 定义一个组件，接收title和visibleModify两个参数
const props = defineProps<{
  visibleModify: boolean;
  isEdit: boolean;
  editData?: Session;
}>();
// 定义emit，用于关闭抽屉
const emit = defineEmits<{
  (event: "closeDrawer"): void;
}>();
watch(
  () => props.isEdit,
  () => {
    if (props.isEdit === true) {
      formState.id = props.editData?.id as string;
      formState.year = props.editData?.year as string;
      formState.term = props.editData?.term as string;
      formState.number = props.editData?.number as string;
      formState.isOpen = props.editData?.isOpen as number;
      formState.description = props.editData?.description as string;
    }
  }
);
const formRef = ref<FormInstance>();

const closeDrawer = () => {
  formState.id = undefined;
  formState.year = new Date().getFullYear() + "";
  formState.term = "";
  formState.number = "";
  formState.isOpen = 1;
  formState.description = "";
};

const formState = reactive<Session>({
  // 定义一个FormState类型的变量，用来存储表单的数据
  id: undefined,
  year: new Date().getFullYear() + "",
  term: "",
  number: "",
  description: "",
  isOpen: 1,
});

const remember = ref();

const handleChange = () => {};
const onSubmit = () => {
  // 验证表单
  formRef.value?.validate().then((valid: any) => {
    // 如果验证通过
    if (valid) {
      // 打印表单状态
      if (props.isEdit === true) {
        editSession(formState).then((res: any) => {
          if (res === 200) {
            message.success("编辑教代会成功");
            emit("closeDrawer");
          } else {
            emit("closeDrawer");
          }
        });
      } else {
        createSession(formState).then((res: any) => {
          if (res === 200) {
            message.success("新建教代会成功");
            emit("closeDrawer");
          } else {
            emit("closeDrawer");
          }
        });
      }
      // 触发关闭抽屉事件
      closeDrawer();
    }
  });
};
</script>

<style scoped lang="less">
:deep(.ant-picker) {
  width: 100%;
}
</style>
